<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>{{title}}</title>
    <link href="/apps/css/bootstrap.min.css" rel="stylesheet">
    <link href="/apps/css/mui.css" rel="stylesheet">
    <script>
        // 点击行的事件处理函数
        function handleRowClick(event) {
            const dataId = event.currentTarget.getAttribute('data-id');
            const modalData = {{{modalDataJson}}};
            if (!modalData.options) return;
            const {options,dataIdName} = modalData;
            const modalTitle = document.getElementById('serverModalTitle');
            modalTitle.textContent = `${dataIdName}#${dataId}的操作选择`; // 设置模态窗口标题文本
            const modalBody = document.getElementById('serverModalBody');
            modalBody.innerHTML = ''; // 清空模态窗口内容
            for (const option of options) {
                const link = document.createElement('a');
                link.href = `${option.url}&${option.arg}=${dataId}`;
                link.classList.add('list-group-item');
                link.textContent = option.name;
                modalBody.appendChild(link);
                const memoItem = document.createElement('p');
                memoItem.textContent = option.memo;
                modalBody.appendChild(memoItem);
            }
            // 弹出模态窗口
            const sodal = new bootstrap.Modal(document.getElementById('serverModal'));
            sodal.show();
        }
        // 绑定点击事件到每行
        document.addEventListener('DOMContentLoaded', function() {
            const rows = document.querySelectorAll('tr[data-id]');
            for (const row of rows) {
                row.addEventListener('click', handleRowClick);
            }
        });
    </script>
    <script src="/apps/js/baidu-tongji-mtx.js"></script>
</head>
<body>
    <div class="container">
        <div class="content">
            <div class="row">
                <div class="col-12">
                    <h5>{{excerpt}}</h5>
                    <p>{{description}}</p>

                    <div class="dropdown-container">
                        <div class="dropdown button-container">
                            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
                                <h5 class="dropdown-header">选择功能</h5>
                                <a class="dropdown-item" href="https://totemlife.cn/apps/crm/">CRM首页</a>
                                <a class="dropdown-item" href="https://totemlife.cn/apps/crm/referrals">推荐查询</a>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped table-bordered">
                            <thead class="table-light">
                                <tr>
                                    {{#each fields}}
                                    <th scope="col" class="cell-content">{{this}}</th>
                                    {{/each}}
                                </tr>
                            </thead>
                            <tbody>
                                {{#each rows}}
                                <tr data-id="{{this.id}}" onclick="showClientModal('{{this.id}}');">
                                    {{#each this}}
                                    <td class="cell-content">{{this}}</td>
                                    {{/each}}
                                </tr>
                                {{/each}}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <nav aria-label="Page navigation" class="pagination-container">
            <ul class="pagination">
                {{{paginator}}}
            </ul>
        </nav>
    </div>

    <div class="modal fade" id="serverModal" tabindex="-1" aria-labelledby="serverModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="serverModalTitle">操作选择窗口</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="serverModalBody">
                    <div class="list-group">
                        <!-- 菜单选项将动态生成 -->
                    </div>
                </div>
                <div class="modal-footer" id="serverModalFooter">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">关闭弹窗</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="clientModal" tabindex="-1" aria-labelledby="clientModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="clientModalTitle">操作选择窗口</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="clientModalBody"></div>
                <div class="modal-footer" id="clientModalFooter">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">关闭弹窗</button>
                </div>
            </div>
        </div>
    </div>

    <script src="/apps/js/popper.min.js"></script>
    <script src="/apps/js/bootstrap.bundle.min.js"></script>
    <script>
        function showClientModal(id) {
            const sodalData = {{{modalDataJson}}};
            if (sodalData.options) return;
            const codal = new bootstrap.Modal(document.getElementById('clientModal'));
            codal.show();
        }
    </script>

    <footer class="footer" style="text-align: center;">
        <div class="row">
            <div class="text-muted">&nbsp;</div>
            <div class="text-muted">&nbsp;</div>
            <div class="text-muted">我们为人类免疫事业而奉献</div>
            <div class="text-muted">&copy;2023 图腾生命医学</div>
        </div>
    </footer>
</body>
</html>
